<template>
  <baidu-map class="bm-view" :ak="baiduAk" v-bind="option" @ready="ready">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <bm-marker v-if="showBmMarker" v-bind="bmMarker" @dragend="markerDragend($event)"></bm-marker>
  </baidu-map>
</template>

<script>
import {baiduAk} from '@/settings'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation';

export default {
  name: 'CusBaiduMap',
  components: {BaiduMap, BmMarker, BmNavigation},
  props: ['option', 'bmMarker'],
  data() {
    return {
      baiduAk
    }
  },
  computed: {
    showBmMarker(){
      return !!this.bmMarker;
    }
  },
  methods: {
    ready(mapIns) { // BMap, map
      this.$emit('ready', mapIns)
    },
    markerDragend($event) {
      this.$emit('markerDragend', $event);
    }
  }
}
</script>

<style lang="scss">
  .bm-view{
    height: 240px;
  }
</style>